<template>
  <div class="order">
      <div class="con_order">
      <!-- 地址 -->
        <div class="address">
            <div class="address_t">请填写收货地址</div>
            <div class="address_t">
                <div class="name">{{address.name}}</div>
                <div class="phone">{{address.phone}}</div> 
            </div>
            <div class="address_info">{{address.info}}</div>
        </div>
        <!--  -->
        <div class="list">
          <div class="content" v-for="(item,index) in list" :key="index">
              <div class="all">
                  <image class="all_img" :src="item.img" alt=""/> 
                  <div class="all_r">
                      <div class="all_title">{{item.title}}</div>
                      <div class="list_cations">
                          <div class="all_cations" v-for="(again_item,id) in item.cations" :key="id">
                              <div class="again" v-for="(items,ids) in again_item" :key="ids">{{ids}}:{{items}}</div> 
                          </div>
                      </div>
                      
                      <div class="all_t">
                          <div class="all_price">¥{{item.price}}</div>
                          <div class="sttep">
                              <div @click="sub(item)">－</div>
                              <div>{{item.num}}</div>
                              <div @click="add(item)">＋</div>
                          </div>
                      </div>  
                  </div>
              </div>
              <div class="delivery">
                  <div>配送</div>
                  <div>快递运输</div>
              </div>
              <div class="message">
                  <div>留言</div>
                  <textarea name="" id="" cols="30" rows="10"></textarea>
              </div>
          </div>
        </div>
        <div class="list_other">
            <div class="all_price">
                <div>商品总价</div>
                <div>¥{{all_price}}</div>
            </div>
            <div class="exepree">
                <div>运费</div>
                <div>¥{{exepree}}</div>
            </div>
        </div>
        <div style="width:100%;height:150rpx"></div>
    </div>
    <div class="footer">
        <div class="footer_info">
            <div>共:<span>{{number}}件</span></div>
            <div>合计:<span>¥{{total_price}}</span></div>
        </div>
        <div class="submission" @click="submission">提交订单</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        address:{name:'王先生',phone:'13265981236',info:'浙江省杭州市滨江区西兴街道迎春小区1幢1单元203室1-1-203'},  //地址信息
        all_price:'' ,   //商品总价
        exepree:'0.00',  //运费
        number:'',       //商品总数量
        list:[           //订单列表
          {img:'/static/images/img.png',title:'商品名称商品名称商品名称商品名称商品名称商品名称商品名称',price:99.99,num:1,
            cations:[
                {颜色:'藏青色'},{尺码:120},{数量:1}
              ]
          },
          {img:'/static/images/img.png',title:'商品名称商品名称商品名称商品名称商品名称商品名称商品名称',price:99.99,num:1,
            cations:[
                {颜色:'藏青色'},{尺码:120},{数量:1}
              ]
          },
        ]
    }
  },
  onLoad(options){
    this.address={}   //默认没有地址
  },
  methods: {
       //减法 
       sub(item){
         if(item.num>1){
           item.num--
         }
       },
       //加法
       add(item){
         item.num++
       },
       //提交
       submission(){
        // 调起微信支付方法
        //  wx.requestPayment({
        //     'timeStamp':timeStamp,
        //     'nonceStr': nonceStr,
        //     'package': 'prepay_id='+res.data.prepay_id,
        //     'signType': 'MD5',
        //     'paySign': res.data._paySignjs,
        //     'success':function(res){
        //         console.log(res);
        //     },
        //     'fail':function(res){
        //         console.log('fail:'+JSON.stringify(res));
        //     }
        //  })
       }
  },
  computed: {
    //商品总价计算  
    total_price(){
      var money = 0
      var alls_price = 0
      this.number = 0
      this.list.map((item,index)=>{
        money+=item.price*item.num
        this.all_price = money.toFixed(2)
        this.number+=item.num
      })
      alls_price = Number(this.all_price)  +Number(this.exepree) 
      return alls_price.toFixed(2)
    }
  },
}
</script>

<style lang="less">
.order{
  width: 100%;
  background: #f5f5f5;
  position: absolute;
  .con_order{
    width: 100%;
    background: #f5f5f5;
    padding: 0 30rpx;
    box-sizing: border-box;
    .address{
      width: 100%;
      height: 170rpx;
      padding: 20rpx 40rpx 0 40rpx;
      box-sizing: border-box;
      background: #fff;
      margin-top: 20rpx;
      border-radius:10rpx;
      .address_t{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        color: #000;
        font-weight:bold;
      }
      .address_info{
        font-size: 26rpx;
        color: #999;
        margin-top: 10rpx;
      }
    }
    .list{
      width: 100%;
      background: #fff;
      padding: 30rpx 24rpx 30rpx 24rpx;
      box-sizing: border-box;
      border-radius:10rpx;
      margin-top: 30rpx;
      .content{
        margin-bottom: 64rpx;
        .all{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .all_img{
            width: 170rpx;
            height: 170rpx;
          }
          .all_r{
            width: 466rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 170rpx;
            .all_title{
              overflow:hidden;
              text-overflow: ellipsis;//显示省略号
              display:-webkit-box;
              -webkit-line-clamp:2;//块元素显示的文本行数
              -webkit-box-orient:vertical;
              color: #000;
              font-size: 26rpx;
              font-weight:400;
            }
            .list_cations{
              display: flex;
              align-items: center;
            }
            .all_cations{
              color: #999;
              font-size: 24rpx;
              margin-right: 10rpx;
            }
            .all_t{
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 28rpx;
              font-weight:400;
              color: #000;
              .sttep{
                display: flex;
                align-items: center;
                view:nth-child(1){
                  width: 40rpx;
                  height: 40rpx;
                  line-height: 40rpx;
                  text-align: center;
                  font-size: 32rpx;
                }
                view:nth-child(2){
                  width: 60rpx;
                  height: 40rpx;
                  line-height: 40rpx;
                  text-align: center;
                  background: #efefef;
                }
                view:nth-child(3){
                  width: 40rpx;
                  height: 40rpx;
                  line-height: 40rpx;
                  text-align: center;
                  font-size: 32rpx;
                }
              }

            }
          }
        }
        .delivery{
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size:26rpx;
          color: #999;
          font-weight:500;
          margin: 28rpx 0 20rpx 0;
        }
        .message{
          display: flex;
          font-size:26rpx;
          color: #999;
          font-weight:500;
          div{
            margin-right: 20rpx;
            white-space: nowrap;
          }
          textarea{
            width: 580rpx;
            height: 112rpx;
            background: #F0F0F0FF;
            border-radius:10rpx;
            padding-left: 20rpx;
            box-sizing: border-box;
            color: #000;
          }
        }
      }
    }
    .list_other{
      width:100%;
      height:110rpx;
      background:rgba(255,255,255,1);
      border-radius:10rpx;
      padding: 14rpx 20rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #333;
      font-size:26rpx;
      font-weight:500;
      margin-top: 26rpx;
      .all_price{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .exepree{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    
  }
  .footer{
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 120rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      background: #fff;
      .footer_info{
        display: flex;
        padding-left: 30rpx;
        box-sizing: border-box;
        color: #666;
        div:nth-child(1n+0){
          margin-right: 20rpx;
          span{
            color: #333;
          }
        }
      }
      .submission{
        width:216rpx;
        height:120rpx;
        background:rgba(255,61,79,1);
        line-height: 120rpx;
        text-align: center;
        color: #fff;
        font-weight:400;
        font-size: 28rpx;
      }
    }
}
  
 
</style>
